<template>
  <u-tabbar
    class="Tabbar"
    :list="tabbar.list"
    mid-button
    hide-tab-bar
    inactive-color="#9FA9BB"
    active-color="#449df8"
    :height="110"
  />
</template>

<script setup>

import { reactive } from 'vue'
import homeIcon from '@/static/images/tabbar/home.png'
import homeTintIcon from '@/static/images/tabbar/home_a.png'
import workbenchIcon from '@/static/images/tabbar/workbench_big.png'
import userIcon from '@/static/images/tabbar/user.png'
import userTintIcon from '@/static/images/tabbar/user_a.png'

const tabbar = reactive({
  current: 0,
  list: [
    {
      pagePath: '/pages/index/index',
      iconPath: homeIcon,
      selectedIconPath: homeTintIcon,
      text: '首页',
    },
    {
      pagePath: '/pages/workbench/index',
      text: '工作台',
      iconPath: workbenchIcon,
      selectedIconPath: workbenchIcon,
      midButton: true,
    },
    {
      pagePath: '/pages/profile/index',
      iconPath: userIcon,
      selectedIconPath: userTintIcon,
      text: '我的',
    },
  ],
})

defineExpose({
  options: {
    styleIsolation: 'shared',
  },
})
</script>

<style lang="scss" scoped>
.Tabbar {
  ::v-deep(.u-fixed-placeholder) {
    background-color: red;
  }
}
</style>
